<template>
<div>
    <div>
        <el-form class="form-order" :inline="true" ref="dataForm" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item label="支付状态:">
                <el-select v-model="dataForm.payStatus" placeholder="支付状态" clearable>
                    <el-option v-for="item in payList" :key="item.label" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="票码状态:">
                <el-select v-model="dataForm.orderStatus" placeholder="票码状态" clearable>
                    <el-option v-for="item in menuList" :key="item.label" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="景区名称:">
                <el-input v-model.trim="dataForm.scenicName" placeholder="景区名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="订单号:">
                <el-input v-model="dataForm.orderNo" placeholder="请输入订单号" clearable onkeyup="value=value.replace(/[^A-Z0-9_]/g,'')"></el-input>
            </el-form-item>
            <el-form-item label="电话:">
                <el-input v-model="dataForm.contactMobile" onkeyup="value=value.replace(/[^0-9_]/g,'')" placeholder="联系人或出行人电话" clearable></el-input>
            </el-form-item>
            <el-form-item label="姓名:">
                <el-input v-model.trim="dataForm.contactsName" placeholder="联系人或出行人姓名" clearable></el-input>
            </el-form-item>
            <el-form-item label="凭证码:">
                <el-input v-model="dataForm.ryCode" placeholder="请输入凭证码" clearable></el-input>
            </el-form-item>
            <el-form-item label="供应商:">
                <el-select v-model="dataForm.supplierName" placeholder="全部" clearable>
                    <el-option v-for="item in supplierList" :key="item.supplierCode" :label="item.supplierName" :value="item.supplierName">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="下单时间:">
                <el-date-picker v-model="createTimeRange" type="daterange" :default-time="['00:00:00','23:59:59']" value-format="yyyy-MM-dd HH:mm:ss" placeholder="回团时间" clearable start-placeholder="选择日期" end-placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button @click="resetForm()">重置</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getDataList()">查询</el-button>
            </el-form-item>
        </el-form>
        <div class="wrapper-table">
            <div>
                <div class="list-order bkf">
                    <!-- 订单列表 -->
                    <div class="bkf">
                        <el-row class="list">
                            <el-col :span="5">订单号</el-col>
                            <el-col :span="3">门票</el-col>
                            <el-col :span="3">下单时间</el-col>
                            <el-col :span="3">联系人</el-col>
                            <el-col :span="3">供应商</el-col>
                            <el-col :span="4">状态</el-col>
                            <el-col :span="3">操作</el-col>
                        </el-row>
                        <div v-if="dataList.length==0" class="el-table__empty-text text-center">暂无数据</div>
                        <div v-else class="wrapper">
                            <div class="item" v-for="item in dataList" :key="item.no">
                                <div class="info-table">
                                    <el-row class="info-table-item">
                                        <el-col :span="5" class="item-name">
                                            <div class="text-color-3">{{item.orderNo}}</div>
                                        </el-col>
                                        <el-col :span="3">
                                            <div>
                                                <div>景区:{{item.scenicName || ''}}</div>
                                                <div>门票:{{item.resourceName || ''}}</div>
                                            </div>
                                        </el-col>
                                        <el-col :span="3">
                                            <div>{{item.orderDate}}</div>
                                        </el-col>
                                        <el-col :span="3">
                                            <div>姓名：{{item.contactsName}}</div>
                                            <div>电话：{{item.contactMobile}}</div>
                                        </el-col>
                                        <el-col :span="3">
                                            <div>{{item.supplierName}}</div>
                                        </el-col>
                                        <el-col :span="4">
                                            <div v-if="item.payStatus == '0'">支付状态：未支付</div>
                                            <div v-else-if="item.payStatus == '1'">支付状态：已支付</div>

                                            <div v-if="item.orderStatus == '0'">票码状态：出票中</div>
                                            <div v-else-if="item.orderStatus == '1'">票码状态：已出票</div>
                                            <div v-else-if="item.orderStatus == '2'">票码状态：已退票</div>
                                            <div v-else-if="item.orderStatus == '3'">票码状态：出票失败</div>
                                            <div v-else-if="item.orderStatus == '4'">票码状态：已使用</div>
                                            <div v-else-if="item.orderStatus == '5'">票码状态：退票中</div>
                                            <div >共：{{item.total}}，销：{{item.sell}}，退：{{item.refund}}</div>
                                        </el-col>
                                        <el-col :span="3">
                                            <template>
                                                <div class="mb10">
                                                    <el-button size="mini" type="primary" @click="toOrderDetail(item.orderNo)">订单详情</el-button>
                                                </div>
                                            </template>
                                        </el-col>
                                    </el-row>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle">
            </el-pagination>
        </div>
    </div>
    <order-detail ref="orderDetail" v-if="detailVisible" :id="selectedId"></order-detail>
<!--    <order-detail-route ref="orderDetailRoute" v-if="routelVisible" :id="selectedId"></order-detail-route>-->
</div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import OrderDetail from './order-detail'
import OrderDetailRoute from './order-detail-route'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      selectedId: '',
      // routelVisible: false,
      detailVisible: false,
      menuList: [{
        label: '全部',
        value: ''
      },
      {
        label: '出票中',
        value: 0
      },
      {
        label: '已出票',
        value: 1
      },
      {
        label: '退票中',
        value: 5
      }, {
        label: '已使用',
        value: 4
      }, {
        label: '已退票',
        value: 2
      }

      ],
      payList: [{
        title: '全部',
        label: '全部',
        name: '',
        value: 0
      },
      {
        title: '待支付',
        label: '待支付',
        name: 'wait_pay',
        value: 0
      },
      {
        title: '已支付',
        label: '已支付',
        name: 'pay',
        value: 1
      },
      {
        title: '已取消',
        label: '已取消',
        name: 'refund_apply',
        value: 2
      }
      ],
      mixinViewModuleOptions: {
        getDataListURL: '/order/getOrderList',
        getDataListIsPage: true
      },
      dataForm: {
        payStatus: undefined,
        orderStatus: undefined,
        scenicName: undefined,
        orderNo: undefined,
        contactMobile: undefined,
        contactsName: undefined,
        ryCode: undefined,
        supplierName: undefined

      },
      statusName: '',
      createTimeRange: [],
      supplierList: []
    }
  },
  watch: {
    createTimeRange (newVal, oldVal) {
      if (newVal == null) {
        this.dataForm.orderDateStart = ''
        this.dataForm.orderDateEnd = ''
      } else {
        this.dataForm.orderDateStart = newVal[0]
        this.dataForm.orderDateEnd = newVal[1]
      }
    },
  },
  created () {
    this.getSupplierList()
  },
  methods: {
    getSupplierList () {
      this.$http.get('/form/getScenicSuppliers').then(res => {
        if (res.data.code !== 0) {
          return this.$message.error(res.data.msg)
        }
        console.log('r===============', res)
        this.supplierList = res.data.data
      })
    },
    toOrderDetail (id) {
      this.selectedId = id
      this.detailVisible = true
      this.$nextTick(() => {
        this.$refs.orderDetail.init()
      })
    },
    resetForm () {
      const dataForm = {
        id: '',
        no: '',
        name: '',
        agency: '',
        createTimeStart: '',
        createTimeEnd: '',
        travelTimeStart: '',
        travelTimeEnd: '',
        contacts: '',
        member: '',
        status: '',
        orderField: '',
        order: '' // asc、desc
      }
      this.dataForm = dataForm
      this.createTimeRange = null
      this.travelTimeRange = null
      this.getDataList()
    }
  },
  components: {
    OrderDetail,
    OrderDetailRoute
  }
}
</script>

<style lang="scss">
.bkf {
    background-color: #fff;
}
.text-color-3 {
    color: #333!important;
}

.text-grey-6 {
    color: #666666;
}

.text-center {
    width: 100%;
    text-align: center;
}

.mb10 {
    margin-bottom: 10px;
}

.form-order {
    margin: 0 20px 20px;
    padding: 20px 20px 12px;
    background-color: #fff;

    .el-input--suffix .el-input__inner {
        padding-right: 0px;
    }
}

.wrapper-table {
    margin: 20px;

    .sort-list {
        padding: 0 20px;
        height: 50px;
        line-height: 50px;

        .sort-name {
            display: inline-block;
            position: relative;
            font-size: 12px;
            padding-right: 14px;
            font-weight: bold;
        }

        .sort-name::after {
            content: "";
            display: block;
            position: absolute;
            right: 0px;
            top: 18px;
            bottom: 18px;
            width: 1px;
            background: #efefef;
        }

        .sort-item {
            position: relative;
            color: #999999;
            font-size: 12px;
            width: 94px;
            text-align: center;

            .caret-wrapper {
                position: relative;
                display: -webkit-inline-box;
                display: -ms-inline-flexbox;
                display: inline-flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                vertical-align: middle;
                cursor: pointer;
                overflow: initial;
                width: 9px;
                height: 15px;
                margin-left: 8px;

                .ascending {
                    position: absolute;
                    top: -2px;
                }

                .descending {
                    position: absolute;
                    bottom: -1px;
                }
            }

            &:not(:last-child)::after {
                content: "";
                display: block;
                position: absolute;
                right: 0px;
                top: 18px;
                bottom: 18px;
                width: 1px;
                background: #efefef;
            }
        }
    }

    .list {
        height: 50px;
        line-height: 50px;
        font-weight: bold;
        text-align: center;
        background-color: #dbedf6;
    }

    .wrapper {
        margin: 0px 20px;
        padding: 10px 0;

        .item {
            font-size: 12px;
            border: 1px solid #eaeaea;

            .info-sm {
                height: 40px;
                line-height: 40px;
                padding-left: 12px;
                background-color: #fafafa;

                span {
                    color: #666666;
                    margin-right: 30px;
                }
            }

            .info-table {
                padding: 18px 0 22px;
                min-height: 130px;
                background: #ffffff;
                text-align: center;
                color: #666;

                .el-col:not(:last-child) {
                    border-right: 1px solid #efefef;
                }

                .item-name {
                    padding: 0 20px;
                    text-align: left;
                    .desc {
                        line-height: 20px;
                    }
                    .el-col {
                        color: #666666;
                        border: none;
                    }
                }
            }
        }

        .item:not(:last-child) {
            margin-bottom: 8px;
        }
    }

    .info-table-item>.el-col {
        height: 130px;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        flex-flow: column wrap;
        justify-content: center;
    }
}
</style>
